<template>
  <div class="content">
    <van-nav-bar title="吐槽" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="pic">
      <van-uploader v-model="fileList" preview-size="5rem" result-type="file" multiple />
    </div>
    <div class="text">
      <van-cell-group inset>
        <van-field v-model="message" rows="2" autosize label="吐槽" type="textarea" maxlength="150" placeholder="请输入留言"
          show-word-limit />
      </van-cell-group>
    </div>
    <van-button type="primary" block style="margin-top:2rem;margin-bottom: 3.5rem;" @click="submit">提交</van-button>
    <van-overlay :show="hasSubmit" @click="overlayshow = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          {{ tips }}
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';
const request = require('@/network/request').default;
import { uploadFile } from "@/utils/upload";
import { useRouter } from 'vue-router'
import { ImgUrl } from '@/constant';
export default {
  name: 'feedback',
  props: [],
  setup(props, context) {
    const onClickLeft = () => history.back();
    const message = ref('')
    const hasSubmitUrl = ref([])
    const hasSubmit = ref(false)
    const fileList = ref([]);
    const router = useRouter();
    const tips = ref('正在提交中...')
    const submit = () => {
      if (message.value || hasSubmitUrl.value.length) {
        hasSubmit.value = true
        fileList.value.forEach(item => {
          setTimeout(() => {
            uploadImage(item.file)
          }, 50);
        })
        setTimeout(() => {
          let form = {
            mes: message.value,
            imgarray: hasSubmitUrl.value,
            uid: (JSON.parse(localStorage.getItem('userInfo'))).uid
          }
          request.post('/feedback', form).then(res => {
            if (res.code == -1) {
              console.log(res)
            } else if (res.code == 0) {
              tips.value='提交成功 √'
              setTimeout(() => {
                router.push('/user')
              }, 1000);
            }
          })
        }, 1500)
      }
    }
    function uploadImage(files) {
      // console.log(files)
      uploadFile(files).subscribe({
        // next: (result) => {
        //   console.log(result)
        // },
        error: (err) => {
          console.log(err)
        },
        complete: (e) => {
          hasSubmitUrl.value.push(ImgUrl + e.key)
        },
      });
    }
    return {
      onClickLeft,
      fileList,
      message,
      submit,
      hasSubmit,
      tips
    }
  },
}
</script>

<style scoped lang="scss">
.content {
  height: 100%;
  background-color: rgb(240, 236, 236);

  .text {}

  .pic {
    margin-top: 1rem;
    margin-left: 1rem;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
      // width: 120px;
      // height: 120px;
      // background-color: #fff;
      color: #fff;
    }
  }
}
</style>